<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>自定义指令</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <h1>自定义指令</h1>
  <hr>
  <div id="app">
    <div v-adam="color">{{num}}</div>
    <p><button @click="add">Add</button></p>
  </div>
  <p>
    <button onclick="unbind()">解绑</button>
  </p>
  <script type="text/javascript">
  function unbind(){
    app.$destroy();
  }
  // Vue.directive("directive",function(el,binding){
  //   console.log(el);
  //   console.log(binding);
  //   console.log(binding.name);
  //   console.log(binding.value);
  //   console.log(binding.expression);
  //   el.style = "color:"+binding.value;
  // });
  Vue.directive("adam",{
    bind:function(el,binding){
      console.log('1-bind');
      // el.style = "color:"+binding.value;
    },
    inserted:function(){
      console.log('2-inserted');
    },
    update:function(el,binding){
      console.log('3-update');
      el.style = "color:"+binding.value;
    },
    componentUpdated:function(){
      console.log('4-componentUpdated');
    },
    unbind:function(){
      console.log('5-unbind');
    }
  });
  var app = new Vue({
    el:'#app',
    data:{
      num:10,
      color:'red',
    },
    methods:{
      add:function(){
        this.num++;
      }
    }
  })
  </script>
</body>
</html>